<style lang="less">
  @import "./app-summary.less";
</style>
</style>
<template>
    <div>
        <Row :gutter="10">
            <Row>
              <el-col :span="23" class="toolbar" id="serachId">
              <el-form :inline="true" :model="query">
                <el-form-item style="float:right">
                  <el-button type="primary" size="small" v-on:click="publishSearchPage">查询</el-button>
                </el-form-item>
                  <el-form-item style="float:right">
                      <el-input v-model="query.appName" size="small" placeholder="请输入应用名称" @keyup.enter.native="searchEnterFun"></el-input>
                  </el-form-item>
                  <el-form-item style="float:right;width:120px">
                      <el-select v-model="query.status" size="small">
                          <el-option label="待审核" value="0"></el-option>
                          <el-option label="已通过" value="1"></el-option>
                          <el-option label="未通过" value="2"></el-option>
                          <el-option label="全部" value=""></el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
              </el-col>
            </Row>

        </Row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="appName" label="应用名称" width="130"/>
            <el-table-column prop="marketName" label="应用市场" width="150"/>
            <el-table-column prop="operateType" label="发布类型" width="130" :formatter="formatOperateType"/>
            <el-table-column prop="status" label="状态" width="120" :formatter="formatStatus"/>
            <el-table-column prop="createUserName" label="申请人" width="130"/>
            <el-table-column prop="createTime" label="申请时间" min-width="125" :formatter="formatCreateTime"/>

            <el-table-column fixed="right" label="操作" min-width="120">
                <template slot-scope="scope">
                    <el-button @click="handleClickDetail(scope.row)" type="text" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="handleClickVerify(scope.row.id, 1)" v-show="scope.row.status != 1 && scope.row.status != 2">通过</el-button>
                    <el-button type="text" size="small" @click="handleClickVerify(scope.row.id, 2)" v-show="scope.row.status != 1 && scope.row.status != 2">不通过</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="23" class="toolbar marginTop10px">
            <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange"
                           :current-page="pageNum" :page-size="pageSize" :total="total">
            </el-pagination>
        </el-col>

        <el-dialog title="应用发布详情" :visible.sync="publishDetailVisible" :modal-append-to-body="false" width="45%" center>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本情况" name="first">
                    <el-row type="flex" class="row-bg">
                        <el-col :span="4"><div class="grid-content bg-purple">应用图标</div></el-col>
                        <el-col :span="4">
                            <img :src="detailData.logoImage"/>
                        </el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用名称: {{detailData.appName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">应用分类: {{detailData.className}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">开发商: {{detailData.supplierName}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">系统应用: {{detailData.isSystemApp | formatYesNoFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用状态: {{detailData.status | formatStatusFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="8"><div class="grid-content bg-purple">应用类型: {{detailData.classification | formatClassificationFilter}}</div></el-col>
                        <el-col :span="4"><div class="grid-content"></div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">应用排序: {{detailData.sort}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">部署网段: {{detailData.network | formatNetworkFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">支持终端: {{detailData.appTerminal | formatAppTerminalFilter}}</div></el-col>
                    </el-row>
                    <el-row type="flex" class="row-bg">
                        <el-col :span="20"><div class="grid-content bg-purple">功能介绍: {{detailData.describe}}</div></el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="发布情况" name="second">
                    <el-row v-if="detailData.operateType == 1">
                        发布审核
                    <ul>
                        <li v-for="version1 in detailData.versionInfoVos">
                            {{version1 == null ? '' : version1.versionType | formatAppTerminalFilter}} 发布：{{version1.version}}
                        </li>
                    </ul>
                    </el-row>
                    <el-row v-if="detailData.operateType == 2">
                        更新审核
                        <ul>
                            <li v-for="version2 in detailData.versionInfoVos">
                                <!--备注 version2是新版， version2.newVersionInfo是旧版-->
                                {{version2 == null ? '' : version2.versionType | formatAppTerminalFilter}} 新版：{{version2 == null ? '' : version2.version}} 旧版：{{version2.newVersionInfo == null ? '' : version2.newVersionInfo.version}}
                            </li>
                        </ul>
                    </el-row>
                </el-tab-pane>
            </el-tabs>

            <el-row v-show="detailData.status == 0">
                <el-col :span="2"></el-col>
                审核意见
                <el-form>
                    <el-col :span="10">
                        <el-radio-group v-model="detailStatus">
                            <el-radio :label="1">通过</el-radio>
                            <el-radio :label="2">不通过</el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="10">
                        <el-form>
                            <textarea v-model="detailTextArea"/>
                        </el-form>
                    </el-col>
                </el-form>
            </el-row>
            <el-row v-show="detailData.status != 0">
                <el-col :span="2"></el-col>
                审核结果：{{detailData.status | formatStatusFilter}}
                审核意见: {{detailData.premark}}
            </el-row>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click.native="publishDetailVisible = false" @click="handleClickVerify(detailData.id, detailStatus)">确定</el-button>
                <el-button @click.native="publishDetailVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import util from '../api/util'

import {appBasePublishSearch, publishMarketUpdateVerify} from '../../api/api';
export default {
    // 组件注册
    components: {
    },
    data () {
        return {
            query: {
                appName: '',
                status: '0',
            },
            tableData: [],
            detailData: {},
            activeName: 'first',
            publishDetailVisible: false,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            detailStatus: 1,
            detailTextArea: ''
        }
    },
    methods: {
         //实现回车键搜索功能
			searchEnterFun:function(e){
				this.publishSearchPage();
            },
        publishSearchPage(){
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                appName: this.query.appName,
                status: this.query.status
            };
            let _this = this;
            appBasePublishSearch(params).then(function(result){
                _this.tableData = result.data.list;
                _this.pageNum = result.data.pageNum;
                _this.pageSize = result.data.pageSize;
                _this.total = result.data.total;
            });
        },
        handleClickDetail(row){
            this.publishDetailVisible = true;
            this.detailData = Object.assign({}, row);
            this.detailStatus = row.status == 1 || row.status == 2 ? row.status : 1;
            this.detailTextArea = row.premark;
        },
        handleClick(){

        },
        handleClickVerify(id, status){
            let mess = '';
            if(status === 1){
                mess = '确认审核通过吗?'
            }else if(status === 2){
                mess = '确认审核不通过吗?'
            }
            this.$confirm(mess, '提示', {
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                let params = {
                    id: id,
                    status: status,
                    remark: this.detailTextArea
                };
                let this_ = this;
                publishMarketUpdateVerify(params).then(function(result){
                    if(result.data.code == 'S100101' && result.data.data == true) {
                        this_.$message({
                            type: 'success',
                            message: '审核成功！'
                        });
                        this_.publishSearchPage();
                    }else{
                        this_.$message({
                            type: 'info',
                            message: result.data.msg
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消审核'
                });
            });
        },
        handleCurrentPageChange: function (pageNum) {// 翻页动作
            this.pageNum = pageNum;
            this.publishSearchPage();// 翻页后刷新页面数据
        },
        formatCreateTime: function (row, column) {
            return row.createTime = (!row.createTime || row.createTime == '') ? '' : util.formatDate.format(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss');
        },
        formatStatus: function (row, column) {
            return row.status == 0 ? '待审核' : row.status == 1 ? '审核通过' : row.status == 2 ? '审核不通过':'';
        },
        formatOperateType: function (row, column) {
            return row.operateType == 1 ? '应用发布' : row.operateType == 2 ? '版本更新' : '';
        }
    },
    filters:{
        formatStatusFilter: function (value){
            return value == 0 ? '待审核' : value == 1 ? '审核通过' : value == 2 ? '审核不通过':'';
        },
        formatNetworkFilter: function(value){
           return value == 1 ? '移动互联网' : value == 2 ? '移动信息网' : value == 3 ? '公安信息网':'';
        },
        formatClassificationFilter: function(value){
            return value == 1 ? 'Ⅰ类应用' : value == 2 ? 'Ⅱ类应用' : value == 3 ? 'Ⅲ类应用':'';
        },
        formatYesNoFilter: function(value){
            return value == 0 ? '否' : value == 1 ? '是' : '';
        },
        formatAppTerminalFilter: function(value){
            if(value != undefined){
                var arr = (value + "").split(",");
                var str = "";
                for(var i in arr){
                    if(arr[i] == '1'){
                        str += "Web、";
                    }else if(arr[i] == '2'){
                        str += "iOS、";
                    }else if(arr[i] == '3'){
                        str += "Android、";
                    }
                }
                return str.substring(0, str.length - 1);
            }
            return ;
        }
    },
    mounted(){
        this.publishSearchPage();
    }
}
</script>
